<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="description" content="Responsive Admin Template"/>
    <meta name="author" content="SmartUniversity"/>
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css"/>
    <!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <!--bootstrap -->
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css"/>
    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/material_style.css}">

    <!-- data tables -->
    <link th:href="@{/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.css}" rel="stylesheet"
          type="text/css"/>
    <!-- animation -->
    <link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
    <!-- Template Styles -->
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}"/>
</head>
<!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
<div class="page-wrapper">
    <!-- start header -->
    <div th:replace="~{commons::headnavbar}"></div>

    <!-- end header -->

    <!-- start page container -->
    <div class="page-container">
        <!-- start sidebar menu -->
        <div th:replace="~{commons::sidebar(active='all_rooms',open='room')}"></div>

        <!-- end sidebar menu -->

        <!-- start page content -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="page-bar">
                    <div class="page-title-breadcrumb">
                        <div class=" pull-left">
                            <div class="page-title">All Rooms</div>
                        </div>
                        <ol class="breadcrumb page-breadcrumb pull-right">
                            <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" th:href="@{/index.html}">Home</a>&nbsp;<i
                                    class="fa fa-angle-right"></i>
                            </li>
                            <li><a class="parent-item" href="">Rooms</a>&nbsp;<i class="fa fa-angle-right"></i>
                            </li>
                            <li class="active">All Rooms</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-box">
                            <div class="card-head">
                                <header>All sRooms</header>
                                <div class="tools">
                                    <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                    <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                    <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                </div>
                            </div>
                            <div class="card-body ">

                                <div class="row p-b-20">
                                    <!--添加房间按钮-->
                                    <form class="col-md-6 col-sm-6 col-6">
                                        <div class="btn-group">
                                            <a th:href="@{/room}" id="addRow" class="btn btn-info">
                                                添加新的房间 <i class="fa fa-plus"></i>
                                            </a>
                                        </div>
                                    </form>
                                </div>

                                <div class="table-scrollable">
                                    <table class="table table-hover table-checkable order-column full-width"
                                           id="example4">
                                        <thead>
                                        <tr>

                                            <th class="center"> 房间编号</th>
                                            <th class="center"> 房间种类</th>
                                            <th class="center"> 房间状态</th>
                                            <th class="center"> 餐饮</th>
                                            <th class="center"> 可住人数</th>
                                            <th class="center"> 房间面积</th>
                                            <th class="center"> 价格</th>
                                            <th class="center"> 操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr th:each="room:${allrooms}" class="odd gradeX">

                                            <td class="center" th:text="${room.rid}"></td>
                                            <td class="center" th:text="${room.roomtype}"></td>
                                            <td class="center" th:text="${room.status}==0?不可住:可住"></td>
                                            <td class="center" th:text="${room.food}"></td>
                                            <td class="center" th:text="${room.capacity}"></td>
                                            <td class="center" th:text="${room.size}+平"></td>
                                            <td class="center" th:text="${room.price}+￥"></td>

                                            <td class="center">

                                                <!--修改按钮-->
                                                <button class="btn btn-tbl-edit btn-xs showUpdateRoom"
                                                        data-toggle="modal"
                                                        data-target="#myModal"
                                                        th:value="${room.rid}"  >
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <!--删除按钮-->
                                                <button class="btn btn-tbl-delete btn-xs deleteRoomBtn"
                                                   th:attr="del_uri=@{/room/}+${room.rid}">
                                                    <i class="fa fa-trash-o "></i>
                                                </button>

                                            </td>


                                        </tr>

                                        <!--th:href="@{/room/}+${room.rid}"  原始修改跳转
                                        th:href="@{/room}+${room.rid}"  原始删除-->
                                        </tbody>
                                    </table>

                                    <!--注意   这是为了提交delete请求，设置的表单，让springboot识别方法-->
                                    <form id="deleteForm" method="post">
                                        <input type="hidden" name="_method" value="delete">
                                    </form>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page content -->

        <div th:replace="~{commons::settingtools}"></div>

    </div>
    <!-- end page container -->
    <!-- start footer -->
    <div th:replace="~{commons::footer}"></div>
    <!-- end footer -->


    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改房间信息</h4>
                </div>
                <div class="modal-body">
                    <form id="updateRoomForm">

                        <div class="form-group">
                            <label for="alterRid" class=" control-label">客房编号</label>
                            <div>
                                <input type="text" class="form-control" name="rid" id="alterRid"  readonly>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="alterRtype" class="control-label">客房类型：</label>
                            <div>
                                <input type="text" class="form-control" name="roomtype" id="alterRtype"
                                       >
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="control-label">餐饮：</label>
                            <select name="food" class="form-control">
                                <option value="无早餐">无早餐</option>
                                <option value="有早餐">有早餐</option>
                                <option value="早晚餐">早晚餐</option>
                                <option value="全部加免费酒水">全部加免费酒水</option>
                            </select>

                        </div>

                        <div class="form-group">
                            <label class="control-label">客房状态：</label>
                            <select name="status" class="form-control">
                                <option value="0">不可住</option>
                                <option value="1">可住</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="capacity" class=" control-label">可住人数</label>
                            <div>
                                <input type="text" class="form-control" name="capacity" id="capacity"
                                       >
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="price" class=" control-label">每晚价格</label>
                            <div>
                                <input type="text" class="form-control" name="price" id="price" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="size" class=" control-label">房间大小</label>
                            <div>
                                <input type="text" class="form-control" name="size" id="size" >
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button  type="button" class="btn btn-default" data-dismiss="modal" id="closeModal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="update">
                                提交更改
                            </button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->

        </div><!-- /.modal -->
    </div>




</div>
<!-- start js include path -->
<script th:src="@{/assets/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/assets/plugins/popper/popper.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-blockui/jquery.blockui.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- bootstrap -->
<script th:src="@{/assets/plugins/bootstrap/js/bootstrap.js}"></script>
<!-- Common js-->
<script th:src="@{/assets/js/app.js}"></script>
<script th:src="@{/assets/js/layout.js}"></script>
<script th:src="@{/assets/js/theme-color.js}"></script>
<!-- datatabes -->
<script th:src="@{/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/assets/plugins/datatables/plugins/bootstrap/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/assets/js/pages/table/table_data.js}"></script>
<!-- Material-->
<script th:src="@{/assets/plugins/material/material.min.js}"></script>
<!-- animatio -->
<script th:src="@{/assets/js/pages/ui/animations.js}"></script>


<script th:src="@{/assets/js/pages/extra_pages/all_rooms.js}"></script>
<!-- end js include path -->
</body>
</html>
